<template>
  <div>
    <nav-top class="mnavtop" :menu_index="0"></nav-top>
    <!-- 品牌网站建设 -->
    <div :class="['build',web_banner_flag?'web_banner_active':'']">
      <div class="build_top">
        <h2>品牌网站建设</h2>
        <p>为客户提供一体化高品质的互联网品牌整合营销方案</p>
      </div>
      <div class="message">
        <span class="message_t">我们的高品质网站建设整合解决方案结合了景烨互联网品牌建设经验和整合营销的理念，并将策略和执行紧密结合，不断评估优化我们的网站设计方案，为客户提供一体化的互联网品牌</span>
        <span class="message_t">整合方案！让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。景烨把公司的定位明确在</span>
        <span class="message_t">合肥品牌网站建设服务商的位置上，我们立志把合适的技术通过高效、便捷的方式提供给</span>
        <span class="message_t">客户，为您的企业电子商务化提供最简单的解决方案。</span>
      </div>
      <div class="m_message">
        <span>
          我们的高品质网站建设整合解决方案结合了景烨互联网品牌建设经验和整合营销的理念，并将策略和执行紧密结合，不断评估优化我们的网站设计方案，为客户提供一体化的互联网品牌
          整合方案！让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。景烨把公司的定位明确在
          合肥品牌网站建设服务商的位置上，我们立志把合适的技术通过高效、便捷的方式提供给
        </span>
      </div>
      <div class="web_banner">
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/web88.png" alt="">
      </div>
      <ul :class="web_bot_flag?'web_bot_active':''">
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/01.png" alt="">
          </div>
          <span>技术</span>
        </li>
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/02.png" alt="">

          </div>
          <span>服务</span>
        </li>
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/03.png" alt="">

          </div>
          <span>策划</span>
        </li>
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/04.png" alt="">

          </div>
          <span>设计</span>
        </li>
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/05.png" alt="">

          </div>
          <span>体验</span>
        </li>
        <li>
          <div class="pic">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/06.png" alt="">

          </div>
          <span>研发</span>
        </li>
      </ul>
    </div>
    <!-- 我们的网站类型有哪些 -->
    <div :class="['type',type_flag?'type_active':'']">
      <div class="content">
        <p>我们的网站类型有哪些</p>
        <ul :class="type_b_flag?'type_b_flag':''">
          <li>
            <div class="con">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/11.png" alt="">
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/10.png" alt="">

              </div>
              <h4>原创设计企业型</h4>
              <div class="line"></div>
              <span>前台采用时下最新的H5响应式布局，一套网 站可在多端浏览，符合w3c国际标 准，兼容360/ie/谷歌/火狐/等浏览器</span>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/12.png" alt="">
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/13.png" alt="">

              </div>
              <h4>电子商务型</h4>
              <div class="line"></div>
              <span>资深设计师根据客户需求原创定制设计，拒绝套用模板，效果图设计到客户满意为止</span>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/14.png" alt="">
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/15.png" alt="">

              </div>
              <h4>行业门户型</h4>
              <div class="line"></div>
              <span>自选域名一个，弹性云服务器一台、ICP非经营性备案、免费维护一年</span>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="pic">
                <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/16.png" alt="">
                <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/17.png" alt="">

              </div>
              <h4>功能需求定制型</h4>
              <div class="line"></div>
              <span>后台采用景烨已获取自主知识产权的管理系统，功能强大，可扩展系统框架；免费对网站实现搜索引擎友好的代码优化，提升官网在主流搜索引擎上的排名
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mType">
      <h2>我们的网站类型有哪些</h2>
      <div class="lunbo">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide>
            <div class="one">
              <div class="pic">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/website/hb01-2.png" alt />
              </div>
              <h3>原创设计企业型</h3>
              <div class="line"></div>
              <span>
                前台采用时下最新的H5响应
                式布局，一套网站可在
                多端浏览，符合w3c国际标
                准，兼容360/ie/谷歌
                /火狐/等浏览器
              </span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="two">
              <div class="pic">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/24.png" alt />
              </div>
              <h3>电子商务型</h3>
              <div class="line"></div>
              <span>
                资深设计师根据客户需求原创定制设计，拒绝套用模板，效果图设计到客户满意为止
              </span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="three">
              <div class="pic">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/website/hd01-2.png" alt />
              </div>
              <h3>行业门户型</h3>
              <div class="line"></div>
              <span>
                自选域名一个，弹性云服务器一台、ICP非经营性备案、免费维护一年
              </span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="four">
              <div class="pic">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/website/uijm01-2.png" alt />
              </div>
              <h3>功能需求定制型</h3>
              <div class="line"></div>
              <span>
                后台采用景烨已获取自主知识产权的管理系统，功能强大，可扩展系统框架；免费对网站实现搜索引擎友好的代码优化，提升官网在主流搜索引擎上的排名
              </span>
            </div>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>//
        </swiper>
      </div>
    </div>
    <!-- 网站建设的优势是什么 -->
    <div :class="['advantage',advantage_flag?'advantage_active':'']">
      <div class="advantage_top">
        <h2>网站建设的优势是什么</h2>
        <p>因为我们是与众不同的，所以你也可以像我们一样</p>
      </div>
      <div :class="['advantage_bot',advantage_b_flag?'advan_b_active':'']">
        <div class="pic">
          <div class="one">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/18.png" alt />
              <div class="pic_p"></div>
              <p> 独立的创意设计的团队</p>
              <div class="a_line"></div>
            </div>
            <span>网站建设拥有独立创意设计团队，专注于互联网视觉设计、交互设计，创造极致化的用户体验</span>
          </div>
          <div class="two">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/22.png" alt />

              <div class="pic_p"></div>

              <p>完善的项目管控体系</p>
              <div class="a_line"></div>

            </div>
            <span>
              项目进程透明化、流程高效化，以规范化的服务保障作品质量，为用户节约大量时间。
            </span>
          </div>
          <div class="three">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/26.png" alt />
              <div class="pic_p"></div>
              <p>周到的售后服务</p>
              <div class="a_line"> </div>

            </div>
            <span>
              提供7x24小时全天候技术支持、免费技术培训、免费数据备份， 解决您的后顾之忧。
            </span>
          </div>
          <div class="four">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/20.png" alt />

              <div class="pic_p"></div>

              <p>只为更好的用户体验</p>
              <div class="a_line"></div>

            </div>
            <span>
              定制交互设计，精美动态特效、流行的响应式布局、让您
              的官网呈现不一样的风格
            </span>
          </div>
          <div class="five">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/24.png" alt />

              <div class="pic_p"></div>

              <p>一站式营销策划</p>
              <div class="a_line"></div>

            </div>
            <span>
              不仅仅为您提供量身定制的高品质网站建设，同时提供整套的网络营销解决方案.....从品牌建设到营销终端。
            </span>
          </div>
          <div class="six">
            <div class="one_t">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconweb/28.png" alt />
              <div class="pic_p"></div>

              <p>低成本高质量</p>
              <div class="a_line"></div>

            </div>
            <span>多年技术积累，让企业以极低成本享受到高端定制</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 那些大咖选择我们 -->
    <!-- <div class="web_bigShot"> -->
    <!-- <div class="web_bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div class="web_bigShot_bot">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="item.src" alt />
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>-->
    <shot></shot>
  </div>
</template>

<script>
// eslint-disable-next-line no-undef
// swiper.el.onmouseover = function() {
//   //鼠标放上暂停轮播
//   // eslint-disable-next-line no-undef
//   swiper.autoplay.stop();
// };
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import navTop from '../Components/nav-one'
import shot from '../Components/shot'

export default {
  components: {
    swiper,
    swiperSlide,
    navTop,
    shot
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 6,
        hoverStop: true, //是否开启鼠标悬停stop
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  },
  data() {
    return {
      advantage_flag: false, //优势滚动特效
      advantage_b_flag: false, // 优势下
      type_flag: false, // 网站类型滚动特效
      type_b_flag: false, //类型 下
      web_banner_flag: false, //
      web_bot_flag: false, // 网站建设下
      scroll: 0, //滚动距离
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination'
        },
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      swiperOption2: {
        notNextTick: true,
        loop: true,
        slidesPerView: 6,
        spaceBetween: 20,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesOffsetBefore: 50,
        pagination: {
          el: '.swiper-pagination'
        },
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll(e) {
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      // console.log(this.scroll)
      if (this.scroll > 80) {
        this.web_banner_flag = true
      }
      if (this.scroll > 600) {
        this.web_bot_flag = true
      }
      // 类型
      if (this.scroll > 900) {
        this.type_flag = true
      }
      if (this.scroll > 1100) {
        this.type_b_flag = true
      }
      if (this.scroll > 1750) {
        this.advantage_flag = true
      }
      if (this.scroll > 2000) {
        this.advantage_b_flag = true
      }
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/Website/index.css');
@import url('../../assets/css/Website/mindex.css');
</style>